<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>Web前端开发规范文档 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="规范,">
  

  <meta name="description" content="通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。文件内容编码均统一为UTF-8。 CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。">
<meta name="keywords" content="规范">
<meta property="og:type" content="article">
<meta property="og:title" content="Web前端开发规范文档">
<meta property="og:url" content="http://blog.poetries.top/2016/07/19/Web前端开发规范文档/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。文件内容编码均统一为UTF-8。 CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-08-15T04:25:31.902Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Web前端开发规范文档">
<meta name="twitter:description" content="通用规范： TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。文件内容编码均统一为UTF-8。 CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#通用规范："><span class="toc-text">通用规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#文件规范："><span class="toc-text">文件规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#HTML书写规范："><span class="toc-text">HTML书写规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#css书写规范："><span class="toc-text">css书写规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#javaScript书写规范："><span class="toc-text">javaScript书写规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#图片规范"><span class="toc-text">图片规范</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#注释规范："><span class="toc-text">注释规范：</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#开发及测试工具约定："><span class="toc-text">开发及测试工具约定：</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-Web前端开发规范文档" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">Web前端开发规范文档</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.07.19</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 3.7k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 15分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <h3 id="通用规范："><a href="#通用规范：" class="headerlink" title="通用规范："></a>通用规范：</h3><ul>
<li>TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。</li>
<li>CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。<br>文件内容编码均统一为UTF-8。</li>
<li>CSS、JAVASCRIPT中的非注释类中文字符须转换成unicode编码使用，以避免编码错误时乱码显示。</li>
</ul>
<a id="more"></a>
<hr>
<h3 id="文件规范："><a href="#文件规范：" class="headerlink" title="文件规范："></a>文件规范：</h3><ul>
<li>文件名用英文单词，多个单词用驼峰命名法。</li>
<li>一些浏览器会将含有这些词的作为广告拦截，文件命名、ID、CLASS等所有命名避免以上词汇。</li>
</ul>
<hr>
<h3 id="HTML书写规范："><a href="#HTML书写规范：" class="headerlink" title="HTML书写规范："></a>HTML书写规范：</h3><ul>
<li>为每个HTML页面的第一行添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现</li>
</ul>
<p><code>&lt;!DOCTYPE html&gt;</code></p>
<p>文档类型声明统一为HTML5声明类型，编码统一为UTF-8</p>
<p><code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code></p>
<p><strong><code>&lt;HEAD&gt;</code>中添加信息</strong></p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"author"</span> <span class="attr">content</span>=<span class="string">"smile@kang.cool"</span>&gt;</span>//作者</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"description"</span> <span class="attr">content</span>=<span class="string">"hello"</span>&gt;</span>//网页描述</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"keywords"</span> <span class="attr">content</span>=<span class="string">"a,b,c"</span>&gt;</span>//关键字,“，”分隔</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"expires"</span> <span class="attr">content</span>=<span class="string">"Wed, 26 Feb 1997 08：21：57 GMT"</span>&gt;</span>//设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Pragma"</span> <span class="attr">content</span>=<span class="string">"no-cache"</span>&gt;</span>//禁止浏览器从本地机的缓存中调阅页面内容</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Window-target"</span> <span class="attr">content</span>=<span class="string">"_top"</span>&gt;</span>//用来防止别人在框架里调用你的页面</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Refresh"</span> <span class="attr">content</span>=<span class="string">"5;URL=http://kahn1990.com/"</span>&gt;</span>//跳转页面，5指时间停留5秒 网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"robots"</span> <span class="attr">content</span>=<span class="string">"none"</span>&gt;</span>//content的参数有all,none,index,noindex,follow,nofollow，默认是all</span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"Shortcut Icon"</span> <span class="attr">href</span>=<span class="string">"favicon.ico"</span>&gt;</span>//收藏图标</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"Cache-Control"</span> <span class="attr">content</span>=<span class="string">"no-cache, must-revalidate"</span>&gt;</span>//网页不会被缓存</span><br></pre></td></tr></table></figure>
<p>IE支持通过特定<meta>标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求，否则最好是设置为edge mode ，从而通知IE采用其所支持的最新的模式。</p>
<p><code>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;</code></p>
<p>非特殊情况下CSS样式文件外链至HEAD之间，JAVASCRIPT文件外链至页面底部</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"css/main.css"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 逻辑代码 --&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 逻辑代码底部 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"lib/jquery/jquery-2.1.1.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>引入JAVASCRIPT库文件，文件名须包含库名称及版本号及是否为压缩版</p>
<p><code>jQuery-1.8.3.min.js</code></p>
<p>引入JAVASCRIPT插件, 文件名格式为库名称+.+插件名称</p>
<p><code>jQuery.cookie.js</code></p>
<p>HTML属性应当按照以下给出的顺序依次排列，来确保代码的易读性</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">class</span><br><span class="line">id 、 name</span><br><span class="line">data-*</span><br><span class="line">src、for、 type、 href</span><br><span class="line">title、alt</span><br><span class="line">aria-*、 role</span><br></pre></td></tr></table></figure>
<p>编码均遵循XHTML标准,标签、属性、属性命名由小写英文、数字和_组成，且所有标签必须闭合，属性值必须用双引号””,避免使用中文拼音尽量简易并要求语义化</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line">CLASS --&gt; nHeadTitle --&gt; CLASS遵循小驼峰命名法（little camel-case）</span><br><span class="line">ID --&gt; n_head_title --&gt; ID遵循名称+_</span><br><span class="line">NAME --&gt; N_Head_Title --&gt; NAME属性命名遵循首个字母大写+_</span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"nHeadTitle"</span> <span class="attr">id</span>=<span class="string">"n_head_title"</span> <span class="attr">name</span>=<span class="string">"N_Head_Title"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>当JAVASCRIPT获取单个元素时，通常使用document.getElementById来获取dom元素，document.getElementById兼容所有浏览器，但IE浏览器会混淆元素的ID和NAME属性，所以要区分ID和NAME命名</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"test"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"test"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">onclick</span>=<span class="string">"alert(document.getElementById('test').tagName)"</span>&gt;</span><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- ie6下为INPUT --&gt;</span></span><br></pre></td></tr></table></figure>
<p>特殊符号应使用转意符</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&lt;    --&gt;    &amp;lt;</span><br><span class="line">&gt;    --&gt;    &amp;gt;</span><br><span class="line">空格  --&gt;</span><br></pre></td></tr></table></figure>
<p>含有描述性表单元素（INPUT，TEXTAREA）添加LABEL。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"test"</span>&gt;</span>测试<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">id</span>=<span class="string">"test"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>多用无兼容性问题的HTML内置标签,<br>比如SPAN、EM、STRONG、OPTGROUP、LABEL等,需要自定义HTML标签属性时，首先考虑是否存在已有的合适标签可替换，如果没有,<br>可使用须以“data-”为前缀来添加自定义属性，避免使用其他命名方式。 语义化HTML。 尽可能减少<div>嵌套。<br>书写链接地址时避免重定向</div></p>
</blockquote>
<p><code>href=&quot;http://www.kahn1990.com/&quot; //即在URL地址后面加“/”</code></p>
<p>HTML中对于属性的定义，确保全部使用双引号，绝不要使用单引号</p>
<hr>
<h3 id="css书写规范："><a href="#css书写规范：" class="headerlink" title="css书写规范："></a>css书写规范：</h3><blockquote>
<p>为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE。即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不能通过W3C验证的代码（如:cursor:hand;）放到另一个文件中，再用下面的方法导入</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 放置所有浏览器样式--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">type</span>=<span class="string">"text/css"</span> <span class="attr">href</span>=<span class="string">""</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 只放置IE必须，而不能通过w3c的--&gt;</span></span><br><span class="line"><span class="comment">&lt;!--[if IE]</span></span><br><span class="line"><span class="comment">    &lt;link rel="stylesheet" href=""&gt;</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>
<p>CSS样式新建或修改尽量遵循以下原则</p>
<p>根据新建样式的适用范围分为三级：全站级、产品级、页面级。<br>尽量通过继承和层叠重用已有样式。<br>不要轻易改动全站级CSS。改动后，要经过全面测试。</p>
<p><strong>CSS属性显示顺序</strong></p>
<ul>
<li>显示属性</li>
<li>元素位置</li>
<li>元素属性</li>
<li>元素内容属性</li>
</ul>
<p><strong>CSS书写顺序</strong></p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.header</span> &#123;</span><br><span class="line"><span class="comment">/* 显示属性 */</span></span><br><span class="line">    display || visibility</span><br><span class="line">    <span class="selector-tag">list-style</span></span><br><span class="line">    position top || right || bottom || left</span><br><span class="line">    <span class="selector-tag">z-index</span></span><br><span class="line">    <span class="selector-tag">clear</span></span><br><span class="line">    <span class="selector-tag">float</span></span><br><span class="line"><span class="comment">/* 自身属性 */</span></span><br><span class="line">    width max-width || min-width</span><br><span class="line">    height max-height || min-height</span><br><span class="line">    overflow || clip</span><br><span class="line">    <span class="selector-tag">margin</span></span><br><span class="line">    <span class="selector-tag">padding</span></span><br><span class="line">    <span class="selector-tag">outline</span></span><br><span class="line">    <span class="selector-tag">border</span></span><br><span class="line">    <span class="selector-tag">background</span></span><br><span class="line"><span class="comment">/* 文本属性 */</span></span><br><span class="line">    <span class="selector-tag">color</span></span><br><span class="line">    <span class="selector-tag">font</span></span><br><span class="line">    <span class="selector-tag">text-overflow</span></span><br><span class="line">    <span class="selector-tag">text-align</span></span><br><span class="line">    <span class="selector-tag">text-indent</span></span><br><span class="line">    <span class="selector-tag">line-height</span></span><br><span class="line">    <span class="selector-tag">white-space</span></span><br><span class="line">    <span class="selector-tag">vertical-align</span></span><br><span class="line">    <span class="selector-tag">cursor</span></span><br><span class="line">    <span class="selector-tag">content</span></span><br><span class="line">    &#125;;</span><br></pre></td></tr></table></figure>
<p>兼容多个浏览器时，将标准属性写在底部</p>
 <figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">-moz-border-radius</span>: 15<span class="selector-tag">px</span>; <span class="comment">/* Firefox */</span></span><br><span class="line"><span class="selector-tag">-webkit-border-radius</span>: 15<span class="selector-tag">px</span>; <span class="comment">/* Safari和Chrome */</span></span><br><span class="line">border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性</span><br></pre></td></tr></table></figure>
<p>使用选择器时，命名比较短的词汇或者缩写的不允许直接定义样式</p>
<p><code>.hd,.bd,.td{};//如这些命名</code></p>
<p>可用上级节点进行限定</p>
<p><code>.recommend-mod .hd</code></p>
<p>多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">button</span><span class="selector-class">.btn</span>,</span><br><span class="line"><span class="selector-tag">input</span><span class="selector-class">.btn</span>,</span><br><span class="line">input[type="button"] &#123;…&#125;;</span><br></pre></td></tr></table></figure>
<p>优化CSS选择器</p>
<p><code>#header a { color: #444; };/*CSS选择器是从右边到左边进行匹配*/</code></p>
<p>浏览器将检查整个文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的祖先元素，如果找不到header将追溯到文档的根节点，解决方法如下</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">避免使用通配规则和相邻兄弟选择符、子选择符,、后代选择符、属性选择符等选择器</span><br><span class="line">不要限定id选择符，如div#header（提权的除外）</span><br><span class="line">不要限定类选择器，如ul.recommend（提权的除外）</span><br><span class="line">不要使用 ul li a 这样长的选择符</span><br><span class="line">避免使用标签子选择符，如#header &gt; li &gt; a</span><br></pre></td></tr></table></figure>
<blockquote>
<p>使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素内容的z-index不能超过10（提示框等模块除外但维持在150以下），不允许直接使用（999~9999）之间大值。<br>尽量避免使用CSS Hack</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">property</span><span class="selector-pseudo">:value</span>; <span class="comment">/* 所有浏览器 */</span></span><br><span class="line">+<span class="selector-tag">property</span><span class="selector-pseudo">:value</span>; <span class="comment">/* IE7 */</span></span><br><span class="line">_<span class="selector-tag">property</span><span class="selector-pseudo">:value</span>; <span class="comment">/* IE6 */</span></span><br><span class="line">*<span class="selector-tag">property</span><span class="selector-pseudo">:value</span>; <span class="comment">/* IE6/7 */</span></span><br><span class="line"><span class="selector-tag">property</span><span class="selector-pseudo">:value</span>\9; <span class="comment">/* IE6/7/8/9，即所有IE浏览器 */</span></span><br><span class="line"></span><br><span class="line">\* html selector &#123; … &#125;; /* IE6 */</span><br><span class="line">\*:first-child+html selector &#123; … &#125;; /* IE7 */</span><br><span class="line">html&gt;body selector &#123; … &#125;; /* 非IE6 */</span><br><span class="line"><span class="keyword">@-moz-document</span> url-prefix() &#123; … &#125;; <span class="comment">/* firefox */</span></span><br><span class="line"><span class="keyword">@media</span> all <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span><span class="number">0</span>) &#123; … &#125;; <span class="comment">/* saf3+/chrome1+ */</span></span><br><span class="line"><span class="keyword">@media</span> all <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span><span class="number">10000</span>),<span class="keyword">not</span> all <span class="keyword">and</span> (<span class="attribute">-webkit-min-device-pixel-ratio:</span><span class="number">0</span>) &#123; … &#125;; <span class="comment">/* opera */</span></span><br><span class="line"><span class="keyword">@media</span> screen <span class="keyword">and</span> (<span class="attribute">max-device-width:</span> <span class="number">480px</span>) &#123; … &#125;; <span class="comment">/* iPhone/mobile webkit */</span></span><br></pre></td></tr></table></figure>
<p>避免使用低效的选择器</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line">body &gt; * &#123;…&#125;;</span><br><span class="line">ul &gt; li &gt; a &#123;…&#125;;</span><br><span class="line">#footer &gt; h3 &#123;…&#125;;</span><br><span class="line">ul#top_blue_nav &#123;…&#125;;</span><br><span class="line">#searbar span.submit a &#123; … &#125;; /* 反面示例 */</span><br></pre></td></tr></table></figure>
<p>六个不要三个避免一个使用</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">不要在标签上直接写样式</span><br><span class="line">不要在<span class="selector-tag">CSS</span>中使用<span class="selector-tag">expression</span></span><br><span class="line">不要在<span class="selector-tag">CSS</span>中使用<span class="keyword">@import</span></span><br><span class="line">不要在CSS中使用!important</span><br><span class="line">不要在CSS中使用“*”选择符</span><br><span class="line">不要将CSS样式写为单行</span><br><span class="line">避免使用filter</span><br><span class="line">避免使用行内（inline）样式</span><br><span class="line">避免使用“*”设置&#123;<span class="selector-tag">margin</span>: 0; <span class="selector-tag">padding</span>: 0;&#125;</span><br><span class="line">使用<span class="selector-tag">after</span>或<span class="selector-tag">overflow</span>的方式清浮动</span><br></pre></td></tr></table></figure>
<p>减少使用影响性能的属性</p>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">position</span><span class="selector-pseudo">:absolute</span>;</span><br><span class="line">float:left;//如这些定位或浮动属性</span><br></pre></td></tr></table></figure>
<p>减少在CSS中使用滤镜表达式和图片repeat,尤其在body当中,渲染性能极差, 如果需要用repeat的话,图片的宽或高不能少于8px</p>
<hr>
<h3 id="javaScript书写规范："><a href="#javaScript书写规范：" class="headerlink" title="javaScript书写规范："></a>javaScript书写规范：</h3><p><strong>命名规范</strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">常量名</span><br><span class="line">    全部大写并单词间用下划线分隔</span><br><span class="line">    如：CSS_BTN_CLOSE、TXT_LOADING</span><br><span class="line">对象的属性或方法名</span><br><span class="line">    小驼峰式（little camel-<span class="keyword">case</span>）</span><br><span class="line">    如：init、bindEvent、updatePosition</span><br><span class="line">    示例：Dialog.prototype = &#123;</span><br><span class="line">                init: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">                bindEvent: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;,</span><br><span class="line">                updatePosition: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line">                …</span><br><span class="line">                &#125;;</span><br><span class="line">类名（构造器）</span><br><span class="line">    --&gt;小驼峰式但首字母大写</span><br><span class="line">    --&gt;如：Current、DefaultConfig</span><br><span class="line">函数名</span><br><span class="line">    --&gt;小驼峰式</span><br><span class="line">    --&gt;如：current()、defaultConfig()</span><br><span class="line">变量名</span><br><span class="line">    --&gt;小驼峰式</span><br><span class="line">    --&gt;如：current、defaultConfig</span><br><span class="line">私有变量名</span><br><span class="line">    --&gt;小驼峰式但需要用_开头</span><br><span class="line">    --&gt;如：_current、_defaultConfig</span><br><span class="line">变量名的前缀</span><br><span class="line">    --&gt;续</span><br></pre></td></tr></table></figure>
<p> 代码格式</p>
 <figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"> &quot;()&quot;前后需要跟空格</span><br><span class="line">&quot;=&quot;前后需要跟空格</span><br><span class="line">&quot;,&quot;后面需要跟空格</span><br><span class="line">JSON对象需格式化对象参数</span><br><span class="line">if、while、for、do语句的执行体用&quot;&#123;&#125;&quot;括起来</span><br></pre></td></tr></table></figure>
<blockquote>
<p>“{}”格式如下</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">if (a==1) &#123;</span><br><span class="line">    //代码</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>避免额外的逗号</p>
<p><code>var arr = [1,2,3,];</code></p>
<blockquote>
<p>for-in循环体中必须用hasOwnProperty方法检查成员是否为自身成员，避免来自原型链上的污染。 长语句可考虑断行</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">TEMPL_SONGLIST.replace(<span class="string">'&#123;TABLE&#125;'</span>, da[<span class="string">'results'</span>])</span><br><span class="line">    .replace(<span class="string">'&#123;PREV_NUM&#125;'</span>, prev)</span><br><span class="line">    .replace(<span class="string">'&#123;NEXT_NUM&#125;'</span>, next)</span><br><span class="line">    .replace(<span class="string">'&#123;CURRENT_NUM&#125;'</span>, current)</span><br><span class="line">    .replace(<span class="string">'&#123;TOTAL_NUM&#125;'</span>, da.page_total);</span><br></pre></td></tr></table></figure>
<p>  为了避免和JSLint的检验机制冲突，“.”或“+”这类操作符放在行尾</p>
  <figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">TEMPL_SONGLIST.replace(<span class="string">'&#123;TABLE&#125;'</span>, da[<span class="string">'results'</span>]).</span><br><span class="line">  replace(<span class="string">'&#123;PREV_NUM&#125;'</span>, prev).</span><br><span class="line">  replace(<span class="string">'&#123;NEXT_NUM&#125;'</span>, next).</span><br><span class="line">  replace(<span class="string">'&#123;CURRENT_NUM&#125;'</span>, current).</span><br><span class="line">  replace(<span class="string">'&#123;TOTAL_NUM&#125;'</span>, da.page_total);</span><br></pre></td></tr></table></figure>
<p>如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入/<em>global</em>/声明。</p>
<p><code>/*global alert: true, console: true, top: true, setTimeout: true */</code></p>
<p>使用严格的条件判断符。用<code>===</code>代替<code>==</code>，用<code>!==</code>代替<code>!=</code>，避免掉入<code>==</code>造成的陷阱,在条件判断时，这样的一些值表示<code>false</code></p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">null</span><br><span class="line">undefined与null相等</span><br><span class="line">字符串&apos;&apos;</span><br><span class="line">数字0</span><br><span class="line">NaN</span><br></pre></td></tr></table></figure>
<p>在==时，则会有一些让人难以理解的陷阱</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> <span class="literal">undefined</span>;</span><br><span class="line">    <span class="literal">undefined</span> == <span class="literal">null</span>; <span class="comment">// true</span></span><br><span class="line">    <span class="number">1</span> == <span class="literal">true</span>; <span class="comment">//true</span></span><br><span class="line">    <span class="number">2</span> == <span class="literal">true</span>; <span class="comment">// false</span></span><br><span class="line">    <span class="number">0</span> == <span class="literal">false</span>; <span class="comment">// true</span></span><br><span class="line">    <span class="number">0</span> == <span class="string">''</span>; <span class="comment">// true</span></span><br><span class="line">    <span class="literal">NaN</span> == <span class="literal">NaN</span>;<span class="comment">// false</span></span><br><span class="line">    [] == <span class="literal">false</span>; <span class="comment">// true</span></span><br><span class="line">    [] == ![]; <span class="comment">// true</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>
<p>对于不同类型的 == 判断，有这样一些规则，顺序自上而下</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">undefined与null相等</span><br><span class="line">一个是number一个是string时，会尝试将string转换为number</span><br><span class="line">尝试将boolean转换为number</span><br><span class="line">0或1</span><br><span class="line">尝试将Object转换成number或string</span><br></pre></td></tr></table></figure>
<p>而这些取决于另外一个对比量，即值的类型，所以对于<code>0</code>、空字符串的判断，建议使用<code>===</code> <code>===</code>会先判断两边的值类型，类型不匹配时为<code>false</code>。<br>下面类型的对象不建议用<code>new</code>构造</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">new</span> <span class="built_in">Number</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">String</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Boolean</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Object</span> <span class="comment">//用&#123;&#125;代替</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span> <span class="comment">//用[]代替</span></span><br></pre></td></tr></table></figure>
<p>引用对象成员用obj.prop代替obj[“prop”]，除非属性名是变量。<br>从number到string的转换。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 推荐写法*/</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">typeof</span>(a); <span class="comment">//"number"</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//1</span></span><br><span class="line"><span class="keyword">var</span> aa=a+<span class="string">''</span>;</span><br><span class="line"><span class="keyword">typeof</span>(aa); <span class="comment">//"string"</span></span><br><span class="line"><span class="built_in">console</span>.log(aa); <span class="comment">//'1'</span></span><br><span class="line"><span class="comment">/** 不推荐写法*/</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">String</span>(a)或a.toString()</span><br></pre></td></tr></table></figure>
<p>从string到number的转换，使用parseInt，必须显式指定第二个参数的进制。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 推荐写法*/</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="string">'1'</span>;</span><br><span class="line"><span class="keyword">var</span> aa = <span class="built_in">parseInt</span>(a,<span class="number">10</span>);</span><br><span class="line"><span class="keyword">typeof</span>(a); <span class="comment">//"string"</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//'1'</span></span><br><span class="line"><span class="keyword">typeof</span>(aa); <span class="comment">//"number"</span></span><br><span class="line"><span class="built_in">console</span>.log(aa); <span class="comment">//1</span></span><br></pre></td></tr></table></figure>
<p>从float到integer的转换</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/** 推荐写法*/</span></span><br><span class="line"><span class="built_in">Math</span>.floor/<span class="built_in">Math</span>.round/<span class="built_in">Math</span>.ceil</span><br><span class="line"><span class="comment">/** 不推荐写法*/</span></span><br><span class="line"><span class="built_in">parseInt</span></span><br></pre></td></tr></table></figure>
<p>字符串拼接应使用数组保存字符串片段，使用时调用join方法。避免使用+或+=的方式拼接较长的字符串，每个字符串都会使用一个小的内存片段，过多的内存片段会影响性能。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">/**推荐的拼接方式array的push、join*/</span></span><br><span class="line"><span class="keyword">var</span> str=[],</span><br><span class="line">    list=[<span class="string">'测试A'</span>,<span class="string">'测试B'</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span> , len=list.length; i &lt; len; i++) &#123;</span><br><span class="line">    str.push( <span class="string">'&lt;div&gt;'</span>+ list[i] + <span class="string">'&lt;/div&gt;'</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(str.join(<span class="string">''</span>)); <span class="comment">//&lt;div&gt;测试A&lt;/div&gt;&lt;div&gt;测试B&lt;/div&gt;</span></span><br><span class="line"><span class="comment">/** 不推荐的拼接方式+=*/</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">''</span>,</span><br><span class="line">    list=[<span class="string">'测试A'</span>,<span class="string">'测试B'</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = list.length; i&lt; len; i++) &#123;</span><br><span class="line">    str+=<span class="string">'&lt;div&gt;'</span> + list[i] + <span class="string">'&lt;/div&gt;'</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">console</span>.log(str); <span class="comment">//&lt;div&gt;测试A&lt;/div&gt;&lt;div&gt;测试B&lt;/div&gt;</span></span><br></pre></td></tr></table></figure>
<p>尽量避免使用存在兼容性及消耗资源的方法或属性</p>
<p><code>不要使用with，void，evil，eval_r，innerText</code></p>
<p>注重HTML分离, 减小reflow, 注重性能</p>
<hr>
<h3 id="图片规范"><a href="#图片规范" class="headerlink" title="图片规范"></a>图片规范</h3><p>命名应用小写英文、数字、_组合，便于团队其他成员理解</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">header_btn.gif</span><br><span class="line">header_btn2.gif</span><br></pre></td></tr></table></figure>
<ul>
<li>页面元素类图片均放入img文件夹,</li>
<li>测试用图片放于img/testimg文件夹，psd源图放入img/psdimg文件夹。</li>
<li>图片格式仅限于gif、png、jpg等。</li>
<li>用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie-6单独定义背景，并尽量避免使用半透明的png图片。</li>
<li>背景图片请尽可能使用sprite技术, 减小http请求</li>
</ul>
<hr>
<h3 id="注释规范："><a href="#注释规范：" class="headerlink" title="注释规范："></a>注释规范：</h3><blockquote>
<p>JAVASCRIPT、CSS文件注释需要标明作者、文件版本、创建/修改时间、重大版本修改记录、函数描述、文件版本、创建或者修改时间、功能、作者等信息。</p>
</blockquote>
<p><code>/* * 注释块 */</code></p>
<p>中间可添加如下信息</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">@file 文件名</span><br><span class="line">@addon 把一个函数标记为另一个函数的扩张，另一个函数的定义不在源文件中</span><br><span class="line">@argument 用大括号中的自变量类型描述一个自变量</span><br><span class="line">@author 函数/类作者的姓名</span><br><span class="line">@base 如果类是继承得来，定义提供的类名称</span><br><span class="line">@class 用来给一个类提供描述，不能用于构造器的文档中</span><br><span class="line">@constructor 描述一个类的构造器</span><br><span class="line">@deprecated 表示函数/类已被忽略</span><br><span class="line">@exception 描述函数/类产生的一个错误</span><br><span class="line">@exec @extends 表示派生出当前类的另一个类</span><br><span class="line">@fileoverview 表示文档块将用于描述当前文件，这个标签应该放在其它任何标签之前</span><br><span class="line">@final 指出函数/类</span><br><span class="line">@ignore 让jsdoc忽视随后的代码</span><br><span class="line">@link 类似于@link标签，用于连接许多其它页面</span><br><span class="line">@member 定义随后的函数为提供的类名称的一个成员</span><br><span class="line">@param 用大括号中的参数类型描述一个参数</span><br><span class="line">@private 表示函数/类为私有，不应包含在生成的文档中</span><br><span class="line">@requires 表示需要另一个函数/类</span><br><span class="line">@return 描述一个函数的返回值</span><br><span class="line">@see 连接到另一个函数/类</span><br><span class="line">@throws 描述函数/类可能产生的错误</span><br><span class="line">@type 指定函数/成员的返回类型</span><br><span class="line">@version 函数/类的版本号</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="开发及测试工具约定："><a href="#开发及测试工具约定：" class="headerlink" title="开发及测试工具约定："></a>开发及测试工具约定：</h3><ul>
<li>编码格式化，三码统一</li>
<li>测试工具: 前期开发仅测试<code>FireFox &amp; IE6 &amp; IE7 &amp; IE8 &amp; IE9 &amp; Opera &amp; Chrome &amp; Safari</code></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/07/09/梳理常用的正则表达式/">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/07/19/Javascript常用方法函数收集/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
